<template>
  <!-- 日历主体 -->
  <view class="calendar_box">
    <!-- <view class="date">{{ currentDateStr }}</view> -->
    <swiper class="cel" :current="index" circular="true" @change="change">
      <swiper-item class="cel-days" v-for="(item, index) in weeks" :key="index">
        <view
          :class="i.date == currentDate ? 'day selected' : 'day'"
          v-for="(it, i) in item"
          :key="i.date"
        >
          <view
            :class="it.date == selectday ? '' : 'day_box'"
            :id="it.date == today ? 'today' : ''"
          >
            <view
              class="item1"
              :style="{ color: it.week == 0 || it.week == 6 ? '#fa6400' : '' }"
              >{{ it.week | weekfilter }}</view
            >
            <!-- <view
              class="item1"
              v-for="(item,index) in weekTitle" :key="index"
              
              >{{ item }}</view
            > -->
            <!-- <view class="item2 fw" v-if="it.day == '01'">{{ it.month }}月</view> -->
            <view
              class="item2"
              :style="{ color: it.date == selectday ? '#0091ff' : '' }"
              >{{ it.date == selectday ? "今天" : it.day }}</view
            >
            <view class="contentBox" @click="pickDay" :data-param="it">
              <view class="contentStr">
                <view class="buildingIds" v-if="it.elevatorCount">
                  {{ it.elevatorCount + "台" }}
                </view>
                <!-- <view
                  class="elevatorIds"
                  v-if="it.buildingIds && buildingChoosed.length > 1"
                  >{{
                    `(${it.buildingIds && it.buildingIds.length}项目)`
                  }}</view
                > -->
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	data() {
		return {
			curIndex: 0,
			index: 0,
			weeks: [],
			currentDate: dayjs().format('YYYY-MM-DD'),
			currentDateStr: '',
			today: dayjs().format('YYYY-MM-DD'),
			startDate: null,
			endDate: null,
			selectday: dayjs().format('YYYY-MM-DD'),
			starTime: '', // 单周的开始时间
			endTime: '', // 单周对应的结束时间
		};
	},
	//   onShow(option) {
	//     this.init();
	//   },
	computed: {
		// ...mapState("dropdown", [
		//   "buildingList",
		//   "buildingId",
		//   "selectOpt",
		//   "companyInfo",
		//   "elevatorList",
		//   "buildingChoosed",
		// ]),
	},
	methods: {
		tapDate(date) {
			//   this.selectday = date;
		},
		// toToday(){
		//    this.init()
		// },
		change(e) { 
			let { currentDate, currentDateStr, index, weeks, startDate, endDate } =
        this;

			let current = e.detail.current;
			let aDate =
        current - index == -2 || current - index == 1 ? endDate : startDate;
   
			if (current == 0) {
				weeks = [
					this.getWeek(0, aDate),
					this.getWeek(1, aDate),
					this.getWeek(-1, aDate),
				];
				startDate = weeks[2][0].date;
				endDate = weeks[1][0].date;
				currentDate = weeks[0][0].date;
				currentDateStr = `${weeks[0][0].year}年${weeks[0][0].month}月`;
			}
			if (current == 1) {
				weeks = [
					this.getWeek(-1, aDate),
					this.getWeek(0, aDate),
					this.getWeek(1, aDate),
				];
				(startDate = weeks[0][0].date),
				(endDate = weeks[2][0].date),
				(currentDate = weeks[1][0].date);
				currentDateStr = `${weeks[1][0].year}年${weeks[1][0].month}月`;
			}
			if (current == 2) {
				weeks = [
					this.getWeek(1, aDate),
					this.getWeek(-1, aDate),
					this.getWeek(0, aDate),
				];
				(startDate = weeks[1][0].date),
				(endDate = weeks[0][0].date),
				(currentDate = weeks[2][0].date);
				currentDateStr = `${weeks[2][0].year}年${weeks[2][0].month}月`;
			}
			this.weeks = weeks;
			this.startDate = startDate;
			this.endDate = endDate;
			this.currentDate = currentDate;
			this.currentDateStr = currentDateStr;
			this.index = current;

			//   console.log(current,weeks)
			this.$emit('change', {
				starDate: weeks[current][0].date,
				endDate: weeks[current][6].date,
				index: current,
				weeks,
			});
			this.$emit('getDateStr',this.currentDateStr);
		},

		curBtn(index) {
			this.curIndex = index;
		},
		getPlanDate(planList, idx) {
			let arr = this.weeks;
			if (planList.length) {
				arr[idx].forEach((item) => {
					planList.forEach((e) => {
						if (item.date == e.planDate) {
							item.buildingIds = e.buildingIds;
							item.elevatorIds = e.elevatorIds;
						}
					});
				});
			}
			this.$set(this.weeks, arr);
		},
		init(planList, val) {
			let index = this.index;
			this.weeks = [];
			//  this.index=0
			// console.log(planList, index, val);
			// 构造一个数组[[],[],[]]，里边放3个星期的数据,[0]放本周，[1]放下一周,[2]放上一周
			let { weeks, startDate, endDate, currentDate } = this;
			let i = dayjs(
				val == 'init' ? currentDate : dayjs().format('YYYY-MM-DD')
			).day();
			let firstDayOfWeek;
			firstDayOfWeek = dayjs(
				val == 'init' ? currentDate : dayjs().format('YYYY-MM-DD')
			).subtract(i - 1, 'day');
			if (i == 0) {
				firstDayOfWeek = dayjs(
					val == 'init' ? currentDate : dayjs().format('YYYY-MM-DD')
				).subtract(6, 'day');
			} 

			if (index == 0) {
				weeks = [
					this.getWeek(0, firstDayOfWeek),
					this.getWeek(1, firstDayOfWeek),
					this.getWeek(-1, firstDayOfWeek),
				];
				startDate = weeks[2][0].date;
				endDate = weeks[1][0].date;
			}
			if (index == 1) {
				weeks = [
					this.getWeek(-1, firstDayOfWeek),
					this.getWeek(0, firstDayOfWeek),
					this.getWeek(1, firstDayOfWeek),
				];
				startDate = weeks[0][0].date;
				endDate = weeks[2][0].date;
			}
			if (index == 2) {
				weeks = [
					this.getWeek(1, firstDayOfWeek),
					this.getWeek(-1, firstDayOfWeek),
					this.getWeek(0, firstDayOfWeek),
				];
				startDate = weeks[1][0].date;
				endDate = weeks[0][0].date;
			}

			this.weeks = weeks;
			this.startDate = startDate;
			this.endDate = endDate;
			this.currentDate = firstDayOfWeek;
			// console.log(val=='init',this.today)
			// this.currentDate=val=='init'?firstDayOfWeek:this.today
			this.currentDateStr = `${weeks[index][0].year}年${weeks[index][0].month}月`;
    
			let arr = weeks;
			if (Object.keys(planList).length) {
				weeks[index].forEach((item) => {
					for (let pro in planList) {
						if (pro == '' + item.year + item.month + Number(item.day)) {
							item.elevatorCount = (planList[pro] || {}).elevatorCount;
						}
					}
				});
				// arr[index].forEach((item) => {
				//   planList.forEach((e) => {
				//     if (item.date == e.planDate) {
				//       item.buildingIds = e.buildingIds;
				//       item.elevatorIds = e.elevatorIds;
				//     }
				//   });
				// });
				this.$set(this.weeks, arr); 
			}
			this.$emit('getDateStr',this.currentDateStr);
		},

		// direction 接收 0,1,-1三个值，分别代表，本周，下周，上周
		getWeek(direction, date) {
			date = dayjs(date);

			// console.log(date.format("YYYY-MM-DD"), "getWeek");
			let firstDayOfWeek = date.subtract(date.day(), 'day');
			// console.log(firstDayOfWeek,'firstDayOfWeek');
			let arr = [];
			for (let i = direction * 7; i < (1 + direction) * 7; i++) {
				let d = date.add(i, 'day');
				// console.log(d);
				arr.push({
					date: d.format('YYYY-MM-DD'),
					day: d.format('D'),
					week: d.day(),
					month: d.month() + 1,
					year: d.year(),
				});
			}
			return arr;
		},
		pickDay(item) {
			let data = item.currentTarget.dataset.param;
			this.$emit('pickDay', data);
		},
	},
	filters: {
		weekfilter(v) {
			let str = null;
			switch (v) {
			case 0:
				str = '日';
				break;
			case 1:
				str = '一';
				break;
			case 2:
				str = '二';
				break;
			case 3:
				str = '三';
				break;
			case 4:
				str = '四';
				break;
			case 5:
				str = '五';
				break;
			case 6:
				str = '六';
				break;

			default:
				break;
			}
			return str;
		},
	},
};
</script>

<style lang="scss" scoped>
.calendar_box {
  swiper{
    height: 200rpx;
    margin: 0 10rpx;
  }
  .date {
    display: flex;
    justify-content: center;
    height: 80rpx;
    align-items: center;
  }
  .contentBox {
    display: flex;
    justify-content: center;
    .contentStr {
      background: #e5f4ff;
      border-radius: 8rpx;
      width: 80rpx;
      .buildingIds{
        font-size: 24rpx;
        color: #333;
      }
      .elevatorIds{
        font-size: 22rpx;
        color: #666;
      }
    }
  }
  /* display: flex;
  box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
  border-radius: 4rpx;
  margin: 0 auto; */
  /* height: 124rpx; */
  /* width: 686rpx; */
}
.calendar_box .center {
  /* height: 124rpx; */
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow-x: auto;
  width: 490rpx;
}
.day {
}
.left image,
.right image {
  width: 40rpx;
  height: 40rpx;
  /* margin-bottom: -4rpx; */
}
.left,
.right {
  display: flex;
  align-items: center;
  display: flex;
  width: 98rpx;
  /* line-height: 36rpx; */
  justify-content: center;
  background: #f3f4f6;
  border-radius: 0px 4rpx 4rpx 0px;
  flex-direction: column;
  font-size: 20rpx;
  color: #444444;
}
.left {
  background: #ea4336;
  border-radius: 4rpx 0px 0px 4rpx;
  color: #fff;
}
.right text {
  margin-top: 10rpx;
}
.cel {
  width: 100%;
}
.cel-days {
  display: flex;
  /* background-color: pink; */
  height: 100%;
}
.day {
  flex: 1;
  color: #333;
  /* background-color: orange; */
  align-items: center;
  text-align: center;
  justify-content: center;

  font-size: 24rpx;
}
.day_box {
  text-align: center;
  display: inline-block;
  /* height: 124rpx; */
  position: relative;
  width: 100%;
  /* width: 98rpx; */
  /* border: 1rpx solid #000; */
  border-radius: 4rpx;
  border: 1rpx solid #fff;
}
.selectday {
  /* background-image: linear-gradient(-45deg, #3857e3, #567bfd); */
  border: 1rpx solid red;
  font-weight: bold;
}
#today {
  color: red;
}
.emary {
  width: 100%;
  text-align: center;
  margin: 32rpx auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 44rpx;
}
.emary image {
  width: 472rpx;
}

/* .item1,
.item3,
.item2 {
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
 
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-top: 6rpx;
  overflow: hidden;
} */
.item1 {
  display: flex;
  height: 64rpx;
  // border-bottom: 2rpx solid #e9e9e9;
  color: #666;
  align-items: center;
  justify-content: center;
}
.item2 {
  /* background: #ffb827; */
  width: 100%;
  font-size: 26rpx;
  color: #333;
  padding: 20rpx 0 12rpx 0;
}
.item3 {
  margin-top: 2rpx;
  width: 100%;
}

.fw {
  font-weight: 600;
}
#today .spot {
  width: 6rpx;
  height: 6rpx;
  background-color: #ea4336;
  border-radius: 50%;
  position: absolute;
  left: 48%;
  bottom: 6rpx;
}
</style>
